<template>
  <section>
    <el-row style="text-align: center">
      <img :src="imgUrl" width="30%"/>
    </el-row>
    <el-row style="text-align: center;margin-top: 10px">
      <el-button size="mini" type="primary" @click="updateQrCode">刷新</el-button>
    </el-row>
  </section>
</template>

<script>
  import dateFormater from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "qrCodeSign",
    props:['currQrCode'],
    data() {
      return {
        imgUrl:null
      }
    },
    created(){
      console.log('到这没？？？？？')
      console.log(this.currQrCode)
      setTimeout(()=>{
        this.updateQrCode()
      }, this.currQrCode.expireSecond*1000)

      if(this.currQrCode.data.qrCodeUrl){
        this.imgUrl=this.currQrCode.data.qrCodeUrl
        return
      }
      this.getCodeImg(this.currQrCode.id)
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch:{},
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getCodeImg(id){
        this.fetch({name:"createQrCodeImg",data:{id}})
          .then(res=>{
            console.log(res)
            this.imgUrl=res.data.qrCodeUrl
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateQrCode(){
        console.log('刷新二维码',this.currQrCode)
        this.fetch({name:"updateQrCode",data:this.currQrCode})
          .then(res=>{
            console.log('更新二维码成功',res)
            this.getCodeImg(res.id)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>

</style>
